<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<!-- 作者：黄佳
用户管理界面 -->
<!-- 测试提交 -->

<body class="layui-layout-body">

    <div>
        <table id="demo" lay-filter="test"></table>
    </div>


    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/lodash.min.js"></script>

    <script>
        layui.use('table', function () {
            const table = layui.table;
            //第一个实例
            const tableObj = table.render({
                elem: '#demo',
                url: '/api/User',//数据接口，模拟的接口
                page: true,
                autoSort: false, //禁用前端自动排序
                toolbar: '#toolbarDemo',
                parseData: function (res) {
                    for (let i = 0; i < res.data.length; i++) {
                        var d = new Date(res.data[i].createTime);
                        var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                        res.data[i].createTime = times;
                        var d = new Date(res.data[i].updateTime);
                        var uptime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                        res.data[i].updateTime = uptime;


                    }
                },
                cols: [
                    [{
                        field: 'mobile',
                        title: '手机号',
                        // width: "35%",
                    }, {
                        field: 'pwd',
                        title: '密码',
                        type: 'password'
                        // width: "10%",
                    }, {
                        field: 'isAdmin',
                        templet: "#admin",
                        title: '管理员',
                        // width: "10%",
                        sort: true
                    }, {
                        field: 'createTime',
                        title: '注册添加时间',
                        // width: "10%",
                        sort: true
                    }, {
                        title: '操作',
                        templet: '<div class="layui-btn-container"></button><button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delStu(`{{d._id}}`,this);"> <i class="layui-icon ">&#xe640;</i></button></div>',
                        // width: "22%",
                    },
                    ]
                ]
            });
            //监听排序事件 
            table.on('sort(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                tableObj.reload({
                    initSort: obj,//记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field, //排序字段
                        order: obj.type //排序方式
                    }
                });
            });
            //lsc
            //form表单中 开关按钮的控制
            layui.form.on("switch", async function (obj) {
                console.log(obj.elem.value, obj.elem.name, obj.elem.checked);
                const duiXiang = {

                }
                // console.log(obj.elem.value, obj.elem.name, obj.elem.checked);
                $.ajax({
                    url: "/api/User/" + obj.elem.value,
                    method: "put",
                    data: obj.elem.name + "=" + obj.elem.checked

                });

            })

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                // var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    // 条件查询的提交按钮事件
                    case 'btnSubmit':
                        let key = $("#txtKey").val();
                        console.log(key);
                        layui.table.reload("demo", {
                            where: {
                                key,
                            },
                            page: {
                                curr: 1
                            }
                        })
                        break;
                        // 条件查询的重置按钮事件
                    case 'btnReset':
                        layui.table.reload("demo", {
                            where: {
                                key:"",
                            },
                            page: {
                                curr: 1
                            }
                        })
                        break;
                        //添加用户按钮事件
                    case 'addstu':
                        location.href = "./add.html"
                        break;
                    
                };
            });
        });
        function delStu(id, ele) {
            layer.confirm('确定删除吗？', { icon: 3 }, function (index) {
                $.ajax({
                    url: "/api/User/" + id,
                    method: "delete",
                    success:function(){
                        location.href = "./index.html"
                        alert("删除成功")
                    },
                    error:function(){
                        alert("删除失败")
                    }
                });
                layer.close(index);
            });
        }



    </script>

    <script type="text/html" id="toolbarDemo">

        <button class="layui-btn layui-btn-sm" lay-event="addstu">添加用户</button>
        <div class="layui-input-inline">
            <input type="text" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-sm" lay-event="btnSubmit">查询</button>
        <button class="layui-btn layui-btn-sm" lay-event="btnReset">重置</button>

    </script>
    <script type="text/html" id="admin">
        <input type="checkbox" name="isAdmin" lay-skin="switch" value={{d._id}} {{d.isAdmin?"checked":""}}>
    </script>

</body>

</html>